<!-- 组合配置 -->
<template>
  <div class="content">
    <div class="chart-wrap" v-show="!showFc">
      <mpvue-echarts :echarts="echarts" :onInit="initChart" :canvasId="'firstCanvas'"  />
    </div>
    <div class="opts-detail" v-if="detailFlag == false">
      <div class="detail-title">
        <span class="txt">按总资产<span class="money">{{money}}元</span>配置如下:(数据更新时间:{{updateTime}}):</span>
        
        <div class="modify-money" style="display:none;">修改金额</div>
      </div>
      <div class="showDiff" @click="showFc = true">
        <div class="q" ></div>
        <div class="showQTxt">为什么我的组合持仓信息和对应样本组合不一样？</div>
      </div>
      
      <div class="each-item" v-for="(item, i1) in tblData" :key="i1">
        <div class="line-two thead">
          <span class="td">{{item.name}}</span>
          <span class="td">{{item.money}}元</span>
          <span class="td">{{item.ratio}}%</span>
        </div>
        <div class="line-two tr" v-for="line in item.list" :key="line">
          <span class="td">
            <span class="name">{{line.bond_name}}</span>
            <span class="nums">{{line.bond_code}}</span>
          </span>
          <span class="td">{{line.money}}元</span>
          <span class="td">{{line.ratio}}</span>
          <span class="arrow"></span>
        </div>
      </div>

    </div>
    <div class="opts-detail" v-else>
      <div class="detail-title">
        <span class="txt">按我的总资产<span class="money">{{money}}元</span>配置如下:(数据更新时间:{{updateTime}}):</span>
        <div class="modify-money" style="display:none;">修改金额</div>
      </div>
      <div class="each-item">
        <div class="line thead">
          <span class="td">名称</span>
          <span class="td">单价</span>
          <span class="td">持仓</span>
          <span class="td">市值</span>
          <span class="td">权重</span>
        </div>
      </div>  
      <div class="each-item" v-for="(item, i1) in tblData" :key="i1">
        <div class="line thead">
          <span class="td">{{item.name}}</span>
          <span class="td"></span>
          <span class="td"></span>
          <span class="td">{{item.money}}元</span>
          <span class="td">{{item.ratio}}%</span>
        </div>
        <div class="line tr" v-for="line in item.list" :key="line">
          <span class="td">
            <span class="name">{{line.bond_name}}</span>
            <span class="nums">{{line.bond_code}}</span>
          </span>
          <span class="td">{{line.price}}</span>
          <span class="td">{{line.number}}</span>
          <span class="td">{{line.money}}元</span>
          <span class="td">{{line.ratio}}</span>
          <span class="arrow"></span>
        </div>
      </div>
    </div>

    <div class="explain-fc" v-show="showFc">
    <box :class-name="'explain-box'">
      <div class="box-title">
          <span class="title"></span>
          <div class="close" @click="showFc = false"></div>
      </div>
      <div class="box-content">
        <p class="explain-txt">
          &nbsp;&nbsp;&nbsp;&nbsp;复来智投是高度个性化的智能投顾产品，每个用户的持仓均由他的风险偏好参数、资金量和入场时点决定。
        </p>
        <p class="explain-txt">
          &nbsp;&nbsp;&nbsp;&nbsp;相同组合的不同用户，由于入场时点不一样，也会导致持仓情况在短期差别很大，但两者长期会趋于一致，因此不会造成两者的长期业绩表现相差很大。
        </p>
        <p class="explain-txt">
          &nbsp;&nbsp;&nbsp;&nbsp;这就好比种树，同样的树苗种子，同样的种植技术，由于种植时间的不同，树的护理方法和生长情况都会有所区别，但这不妨碍它们最终都会长成苍天大树。
        </p>
      </div>
    </box>
    </div>


  </div>
  
  
</template>
<script>
import * as echarts from 'echarts/lib/echarts';
require('echarts/lib/chart/pie.js');
require('echarts/lib/component/legend.js');
import mpvueEcharts from 'mpvue-echarts';
import { setTimeout } from 'timers';
import Box from "@/components/box";

export default {
  components: {
    mpvueEcharts,
    Box
  },
  props: {
    data: {
      type: Object,
    },
    money: {
      type: Number,
      default: 0,
    },
    updateTime: {
      type: Number,
      default: 0,
    },
    flag:{
      type: Number,
      default: 1,
    },
    detailFlag:{
      type: Boolean,
      default: false,
    },
    showFc:{
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      echarts,
      pieColor: ['#345d9a', '#e65f43', '#6ba35b', '#7a61a4', '#399b9f', '#9f8c39'],
      legendData: [],
      seriesData: [],
      tblData: [],
      data: [],
      showFc:false
    }
  },
  methods: {
    // 初始化表格
    initChart(canvas, width, height) {
      const vthis = this;
      // 图形颜色
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(chart);
      var option = {
        legend: {
          orient: 'vertical',
          top: 'center',
          left: '70%',
          itemWidth: 15,
          itemHeight: 15,
          // data:['A股  50%','港股  5.0%','境外股票  5.0%','债券  30.0%','货币  10.0%']
        },
        series: [
          {
            type:'pie',
            center: ['120', '50%'],
            radius: ['58', '105'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inside',
              formatter: '{d}%',
            },
          }
        ]
      }
      // TODO 请求获取数据
      setTimeout(() => {
        option.legend.data = vthis.legendData;
        option.series[0].data = vthis.seriesData;
        chart.setOption(option);
        return chart;
      }, 0);
    }
  },
  onLoad() {
    // 组织图表所需要的数据
    const srcData = this.data;
    console.log('srcData');
    const keys = Object.keys(srcData);
    const legendData = [];
    const seriesData = [];
    const tblData = [];
    keys.forEach((it, idx) => {
      legendData.push(`${it} ${srcData[it].ratio}%`);
      seriesData.push({
        value: srcData[it].ratio,
        name: `${it} ${srcData[it].ratio}%`,
        itemStyle: {color: this.pieColor[idx]},
      });
      tblData.push({
        name: it,
        money: srcData[it].money,
        ratio: srcData[it].ratio,
        list: srcData[it].list,
      });
    });
    this.legendData = legendData;
    this.seriesData = seriesData;
    this.tblData = tblData;
  }
}
</script>
<style lang="less" scoped>
  .chart-wrap {
    width: 100%;
    height: 508rpx;
    background-color: #fff;
    position: relative;
    z-index: 100;
  }
  .opts-detail {
    .detail-title {
      height: 80rpx;
      padding: 0 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .txt {
        font-size: 28rpx;
        color: #333333;
        .money {
          color: #e74612;
        }
      }
      .modify-money {
        width: 150rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        font-size: 26rpx;
        color: #fff;
        background-color: #4768f3;
        border-radius: 20rpx;
      }
    }
    .each-item {
      .line {
        display: flex;
        align-items: center;
        .td {
          flex-grow: 0;
          flex-shrink: 0;
          text-align: center;
          &:nth-child(1) {
            flex-basis: 160rpx;
          }
          &:nth-child(2) {
            flex-basis: 120rpx;
          }
          &:nth-child(3) {
            flex-basis: 140rpx;
          }
          &:nth-child(4) {
            flex-basis: 160rpx;
          }
          &:nth-child(5) {
            flex-basis: 140rpx;
          }
        }
        &.thead {
          .td {
            flex-basis: 145rpx;
            font-size: 26rpx;
            color: #fff;
            height: 60rpx;
            line-height: 60rpx;
          }
        }
        &.tr {
          position: relative;
          .td {
            font-size: 28rpx;
            color: #333333;
            background-color: #fff;
            height: 100rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
          .arrow {
            display: block;
            width: 14rpx;
            height: 25rpx;
            background: url(../find/img/arrow.png) no-repeat 0 0;
            background-size: cover;
            position: absolute;
            top: 34rpx;
            right: 30rpx;
          }
        }
      }
      .line-two{
        display: flex;
        align-items: center;
        .td {
          flex-grow: 0;
          flex-shrink: 0;
          text-align: center;
          &:nth-child(1) {
            flex-basis: 340rpx;
          }
          &:nth-child(2) {
            flex-basis: 185rpx;
          }
          &:nth-child(3) {
            flex-basis: 165rpx;
            padding-right: 60rpx;
          }
        }
        &.thead {
          .td {
            font-size: 26rpx;
            color: #fff;
            height: 60rpx;
            line-height: 60rpx;
          }
        }
        &.tr {
          position: relative;
          .td {
            font-size: 28rpx;
            color: #333333;
            background-color: #fff;
            height: 100rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
          .arrow {
            display: block;
            width: 14rpx;
            height: 25rpx;
            background: url(../find/img/arrow.png) no-repeat 0 0;
            background-size: cover;
            position: absolute;
            top: 34rpx;
            right: 30rpx;
          }
        }
      }
      .tr + .tr {
        border-top: 1rpx solid #e5e5e5;
      }
      &:nth-child(2) {
        .thead {
          background-color: #345d9a;
        }
      }
      &:nth-child(3) {
        .thead {
          background-color: #e65f43;
        }
      }
      &:nth-child(4) {
        .thead {
          background-color: #6ba35b;
        }
      }
      &:nth-child(5) {
        .thead {
          background-color: #7a61a4;
        }
      }
      &:nth-child(6) {
        .thead {
          background-color: #399b9f;
        }
      }
      &:nth-child(7) {
        .thead {
          background-color: #9f8c39;
        }
      }
    }
  }

  .showDiff{
    display: flex;
    color: #e74612;
    .q {
        width: 40rpx;
        height: 40rpx;
        background: url(../risk-assessment/img/q.png) no-repeat 0 0;
        background-size: cover;
    }
    .showQTxt{
       font-size: 28rpx;
       color:blue;
    }  
  }

  .question-list {
    margin-bottom: 80rpx;
    .item {
      width: 690rpx;
      border-radius: 9rpx;
      background-color: #fff;
      margin-bottom: 20rpx;
      .title {
        padding: 20rpx 15rpx 20rpx 20rpx;
        border-bottom: 1rpx solid #e5e5e5;
        position: relative;
        .title-txt {
          font-size: 30rpx;
          color: #333333;
          line-height: 50rpx;
          padding: 10rpx 0;
        }
        .title-tips {
          font-size: 26rpx;
          color: #999999;
        }
        .q {
          width: 36rpx;
          height: 36rpx;
          background: url(../risk-assessment/img/q.png) no-repeat 0 0;
          background-size: cover;
          position: absolute;
          top: 30rpx;
          right: 27rpx;
        }
      }
      .slider-area {
        padding: 20rpx 35rpx 30rpx  35rpx;
        .value-line {
          display: flex;
          justify-content: space-between;
          padding: 0 10rpx;
          .v {
            font-size: 26rpx;
            color: #333333;
          }
        }
      }
      .radio-group {
        padding: 40rpx;
        display: flex;
        justify-content: space-between;
        .radio {
          flex: 0 0 150rpx;
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
  }

  .explain-fc {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #949496;
    padding: 178rpx 0 0 30rpx;
    .explain-box {
      .box-title {
        justify-content: space-between;
        .close {
          width: 40rpx;
          height: 40rpx;
          background: url(../risk-assessment/img/close.png) no-repeat 0 0;
          background-size: cover;
          margin-right: 40rpx;
        }
      }
      .box-content {
        padding: 30rpx;
        .explain-txt {
          font-size: 28rpx;
          color: #666666;
          line-height: 48rpx;
        }
      }
    }
  }
  
</style>
